<template>
    <div>
        <div class="title">
            <!-- fas fa-angle-down -->
            <i class="icon fas fa-angle-up " @click="handlerArrow"></i>
        </div>
        <ul class="menu">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { gsap } from "gsap";
import { size } from "lodash";

const arrowFlag = ref(true);
const ulRef = ref(null)

const changeArrow = (
    { el, rotate },
    {
        height,
        fontSize,
        marginBottom,
        padding,
        duration
    }) => {
    gsap.to(el, {
        rotate,
        duration: 1
    })
    gsap.to('.menu>li', {
        height,
        fontSize,
        marginBottom,
        padding,
        duration
    })
}

const handlerArrow = e => {
    // if(arrowFlag.value){
    //     changeArrow(e.target,-180);
    //     arrowFlag.value = !arrowFlag.value;
    // }else{
    //     changeArrow(e.target,0);
    //     arrowFlag.value = !arrowFlag.value;
    // }

    arrowFlag.value ? changeArrow({el:e.target, rotate:180},{
        height: 0,
        fontSize: 0,
        marginBottom: 0,
        padding: '0px 0px',
        duration: 1
    }) : changeArrow({el:e.target, rotate:0},{
        height: 'auto',
        fontSize: 16,
        marginBottom: 5,
        padding: '5px 20px',
        duration: 0.2
    });
    arrowFlag.value = !arrowFlag.value;
}



</script>

<style lang="scss" scoped>
* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    width: 200px;
    border: 1px solid black;
}

li {
    padding: 5px 20px;
    margin-bottom: 5px;
    border: 1px solid;
}

.icon {
    margin-left: 100px;
    font-size: 30px;
    cursor: pointer;
}
</style>